<template>
	<view class="container">
		<view class="top">
			<view class="left">
				<image src="../static/logo.png" mode="" class="user_icon"></image>
				<view class="user_name">
					一级标题
				</view>
				<view class="user_location">
					<image src="../static/img/location.png" mode="widthFix" class="icon"></image>
					<text class="location">地理位置</text>
				</view>
			</view>
			<view class="right">
				<button class="bg-gradual-blue">进入官网</button>
			</view>
		</view>
		<view class="content">
			<view class="margin-bottom-sm" @tap="showMore">
				<view class="content_text margin-top-xs" :class="[isShowMore ? '' : 'content_text_toggle']">
					{{datass}}
				</view>
				<image class="icon":class="[isShowMore ? 'i' : '']" src="../static/img/drop-down.png" mode="widthFix"></image>
			</view>
			<view class="content_img">
				<image @tap="onTap" src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<image src="../static/logo.png" mode="widthFix"></image>
				<text class="img_num">23</text>
			</view>
			<view class="interactive">
				<interactive :src="[isLike ? '../static/img/like-select.png' : '../static/img/like.png']" :text="likeNum" class="padd_10"
				 @tap="handleLike" />
				<interactive src="../static/img/comment.png" text="20" class="padd_10" @tap="showMask()" />
			</view>
		</view>
		<view class="margin-top-sm margin-bottom-sm">
			<icon-list :isPadding="false"></icon-list>
		</view>
	</view>
</template>

<script>
	import interactive from '@/components/interactive.vue';
	import iconList from '@/components/iconList.vue';
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	export default {
		data() {
			return {
				likeNum: 30,
				isLike: true,
				isShowMore: false,
				datass: '今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错今天不错今天天气不错今天天气不错今天天气不错今天不错今天天气不错今天天气不错今天天气不错今天不错今天天气不错今天天气不错今天天气不错今天不错今天天气不错今天天气不错今天天气不错今天天气不错今天天气不错'
			};
		},
		methods: {
			// 展示更多文字,默认只展示两行
			showMore() {
				this.isShowMore = !this.isShowMore;
			},
			//获取字符串的字节数，扩展string类型方法
			byteLength(str) {
				var realLength = 0,
					len = str.length,
					charCode = -1;
				for (var i = 0; i < len; i++) {
					charCode = str.charCodeAt(i);
					if (charCode >= 0 && charCode <= 128) {
						realLength += 1;
					} else {
						realLength += 2;
					}
				}
				return realLength;
			},
			onTap(e) {
				const index = e.
				uni.previewImage({
					urls: [
						'../static/logo.png',
						'../static/logo.png',
						'../static/logo.png',
						'../static/logo.png',
						'../static/logo.png',
						'../static/logo.png',
						'../static/logo.png',
						'../static/logo.png',
					],
					current: this.$data.arr[index]
				})
			},
			// 跳转到个人站首页
			goStation() {
				uni.navigateTo({
					url: '../secondStation/secondStation'
				})
			},
			// 点赞
			handleLike() {
				const flag = this.isLike;
				if (!flag) {
					this.likeNum = this.likeNum + 1;
					this.isLike = !this.isLike;
				} else {
					this.likeNum = this.likeNum - 1;
					this.isLike = !this.isLike;
				}
			},
			//触发父组件评论框
			showMask(){
				this.$emit('showMask')
			}
		},
		components: {
			interactive,
			ygcComment,
			iconList
		},
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		padding: 0 25rpx 10rpx 25rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;

		.top {
			display: flex;
			width: 100%;
			padding: 20rpx 0;

			.left {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 75%;
				height: 100rpx;
				padding-left: 100rpx;
				box-sizing: border-box;

				.user_icon {
					position: absolute;
					left: 0;
					top: calc(50% - 40rpx);
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
				}

				.user_name {
					font-size: 36rpx;
					font-weight: bold;
				}

				.user_location {

					.icon {
						width: 20rpx;
						text-align: center;
						margin-right: 10rpx;
					}

					.location {
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
				width: 25%;

				button {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 24rpx;
					border-radius: 20rpx;
				}

				button::after {
					border: none;
				}
			}

		}

		.content {
			width: 100%;
			border-bottom: 1px solid #C0C0C0;

			.content_text {
				width: 700rpx;
				font-size: 32rpx;
				color: #666;
				line-height: 1.5em;
			}

			.icon {
				display: block;
				width: 60rpx;
				margin: auto;
			}
			.i{
				transform:rotate(180deg);
			}

			.content_text_toggle {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.content_img {
				position: relative;
				width: 700rpx;
				height: 700rpx;
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				flex-wrap: wrap;
				overflow: hidden;

				image {
					width: 31%;
					height: 31%;
				}

				.img_num {
					position: absolute;
					right: 80rpx;
					bottom: 80rpx;
					padding: 10rpx;
					background-color: rgba(0, 0, 0, 0.2);
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.interactive {
				display: flex;
				justify-content: flex-end;
				margin-top: 10rpx;
			}

			.padd_10 {
				padding: 20rpx;
			}

		}

		.comment_list {
			width: 100%;
			padding: 10rpx 0;

			.item {
				display: flex;
				align-items: center;
				padding: 5rpx 0;

				.icon {
					width: 30rpx;
					border-radius: 30rpx;
					margin-right: 10rpx;
				}

				.text {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
</style>
